<template>
	<view class="sk-wave">
		<view class="rect rect-1"></view>
		<view class="rect rect-2"></view>
		<view class="rect rect-3"></view>
		<view class="rect rect-4"></view>
		<view class="rect rect-5"></view>
	</view>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
	@-webkit-keyframes sk-wave-stretch-delay {

		0%,
		40%,
		100% {
			-webkit-transform: scaleY(0.4);
			transform: scaleY(0.4);
			opacity: 0.4;
		}

		20% {
			-webkit-transform: scaleY(1);
			transform: scaleY(1);
			opacity: 1;
		}
	}

	@keyframes sk-wave-stretch-delay {

		0%,
		40%,
		100% {
			-webkit-transform: scaleY(0.4);
			transform: scaleY(0.4);
			opacity: 0.4;
		}

		20% {
			-webkit-transform: scaleY(1);
			transform: scaleY(1);
			opacity: 1;
		}
	}

	.sk-wave {
		width: 60px;
		height: 40px;
		text-align: center;

		.rect {
			width: 6px;
			height: 100%;
			margin: 0 1.9px;
			display: inline-block;
			background-color: rgba($color: #000000, $alpha: 0.13);
			-webkit-animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
			animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
		}

		.rect-1 {
			-webkit-animation-delay: -1.2s;
			animation-delay: -1.2s;
		}

		.rect-2 {
			-webkit-animation-delay: -1.1s;
			animation-delay: -1.1s;
		}

		.rect-3 {
			-webkit-animation-delay: -1s;
			animation-delay: -1s;
		}

		.rect-4 {
			-webkit-animation-delay: -0.9s;
			animation-delay: -0.9s;
		}

		.rect-5 {
			-webkit-animation-delay: -0.8s;
			animation-delay: -0.8s;
		}
	}
</style>